<style scoped>
  .layout-con {
    height: 100%;
    width: 100%;
  }

  .menu-item span {
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }

  .menu-item i {
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }

  .collapsed-menu span {
    width: 0px;
    transition: width .2s ease;
  }

  .collapsed-menu i {
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
  }

  .title-top-center {
    text-align: center;

  }

  .title-top-right {
    float: right
  }

  .btn_tools {
    padding: 6px 10px 6px 10px;
    background: #eee;
    border-radius: 20px;
  }

  .ivu-cell-extra {
    color: #ed4014;
  }
</style>
<template>
  <Row type="flex" justify="center" align="top" class="code-row-bg">
    <Col span="1" style="background:#3F88D5;height:100vh;">
      <NavLeft :selected="1" :avatar="avatar"></NavLeft>
    </Col>
    <Col span="4">
      <NavMiddle :itemList="itemList"></NavMiddle>
    </Col>
    <Col span="19" style="background:#f5f7f9;height:100vh;">
      <Layout>
        <Content :style="{padding: '0 16px 16px'}">
          <Breadcrumb :style="{margin: '16px 0'}">
            <Row type="flex" justify="space-between">
              <Col span="6">
                <a type="text" size="large" @click="$router.back(-1)">
                  <Icon type="ios-arrow-back"></Icon>
                  返回
                </a>

              </Col>
              <Col span="12" class="title-top-center"
                   style="font-size: 16px; font-weight: bold; color: rgb(70, 76, 91);text-align:center;">班组详情
              </Col>
              <Col span="6">

              </Col>
            </Row>

          </Breadcrumb>
          <Card class="pushCard" :bordered="true" dis-hover>
            <div slot="title" style="">
              <Button shape="circle" :to="{path:'/item/parameter',query:{id:unit_id}}">主要参数</Button>
              <Button shape="circle" style="margin-left:6px;" :to="{path:'/item/rules',query:{id:unit_id}}">成绩规则
              </Button>
              <Button shape="circle" style="margin-left:6px;" :to="{path:'/item/push',query:{id:unit_id}}">推送等级</Button>
              <Button shape="circle" style="margin-left:6px;" :to="{path:'/item/manager',query:{id:unit_id}}">管理等级
              </Button>
              <Button type="primary" shape="circle" style="margin-left:6px;"
                      :to="{path:'/item/members',query:{id:unit_id}}">人员列表
              </Button>
              <Button shape="circle" style="margin-left:6px;" :to="{path:'/item/info',query:{id:unit_id}}">单元信息</Button>

            </div>
          </Card>
          <div class="memberContent">
            <Modal
                v-model="updateModal"
                title="修改职位"
                @on-ok="updateOk"
                @on-cancel="updateCancel">
              <Input v-model="updateValue" :placeholder="updateItem.position" />
            </Modal>
            <Modal
                v-model="deleteModal"
                title="是否删除成员"
                @on-ok="deleteOk"
                @on-cancel="deleteCancel">
              <p>是否删除    {{deleteItem.name}}</p>
            </Modal>
            <div class="members" v-for="(list,ind) in lists">
              <div class="membersTitle">
                <span class="memt_title">{{ list.name }}</span>
                <span class="add" v-if="ind > -1 && ind < 4" @click="addPeo(ind)">添加</span>
              </div>
              <div class="memberList">
                <div class="member" v-for="(item,index) in list.items">
                  <Icon type="ios-close-circle" v-if="ind < 4" @click="deletePeo(item)" />
                  <div class="mem_con">
                    <div class="memc_left">
                      <div class="photo"><img :src="item.avatar"/></div>
                      <span class="name">{{ item.name }}</span>
                    </div>
                    <div class="memc_right">
                      <span class="tel">{{ item.mobile }}</span>
                      <span class="identity" @click="updateIdentity(item)">重庆天人工业集团　{{ item.position }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </Content>
        <membersAddPeo :personData="personData" v-if="mapShow" @save="addResult"></membersAddPeo>
      </Layout>
    </Col>
  </Row>
</template>
<script>
  import cookie from 'js-cookie';
  import NavLeft from '@/components/NavLeft';
  import NavMiddle from '@/components/NavMiddle';
  import membersAddPeo from '../assembly/membersAddPeo'

  export default {
    data() {
      return {
        isCollapsed: false,
        itemList: [],
        itemInfo: [],
        lists: [],
        unit_id: "",
        avatar: "",
        updateModal: false,
        updateItem: {},
        updateValue: '',
        deleteModal: false,
        deleteItem: {},
        mapShow: false,
        personData: '',
        chooseDate: cookie.get('chooseDate'),
      };
    },
    components: {NavLeft: NavLeft, NavMiddle: NavMiddle, membersAddPeo: membersAddPeo},
    methods: {
      getData() {
        var uid = cookie.get('uid');
        var token = cookie.get('token');
        var unit_id = localStorage.getItem('middleId')
        if (!unit_id) {
          this.$Message.warning('无参数不能访问');
          return;
          //store.dispatch('setLoginStatus', 0)
          //window.location.reload()
        }
        this.$Loading.start();
        var str = {unit_id: unit_id, loginType: cookie.get('loginType'),ymd: this.chooseDate};
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/members', {alldata: strdata.alldata}).then((response) => {
          this.$Loading.finish();
          var res = this.$twjsdes.decrypt(response.data.alldata);
          if (res.status == -1 && res.data.backurl) {
            this.$Modal.warning({
              title: '提示',
              content: '请在企业微信授权登录后使用',
              onOk: () => {
                window.location.href = res.data.backurl
              }
            });

          } else if (res.status != 1) {
            this.$Message.error(res.msg);
          } else {
            // console.log(res.data);
            this.itemList = res.data.item_all_list;
            this.itemInfo = res.data;
            this.lists = res.data.list;
            this.unit_id = unit_id ? unit_id : res.data.unit_id;
            this.avatar = res.data.avatar;
          }
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
      deletePeo(item) {
        let self = this
        self.deleteModal = true
        self.deleteItem = item
      },
      updateIdentity(item) {
        let self = this
        self.updateItem = item
        self.updateModal = true
      },
      updateOk() {
        let self = this
        var uid = cookie.get('uid');
        var token = cookie.get('token');
        var unit_id = localStorage.getItem('middleId')
        if (!unit_id) {
          this.$Message.warning('无参数不能访问');
          return;
          //store.dispatch('setLoginStatus', 0)
          //window.location.reload()
        }
        this.$Loading.start();
        var str = {
          menber_id: self.updateItem.menber_id,
          unit_id: self.updateItem.unit_id,
          uid: uid,
          position: self.updateValue,
          loginType: cookie.get('loginType')
        };
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/info/upposition', {alldata: strdata.alldata}).then((response) => {
          this.$Loading.finish();
          var res = this.$twjsdes.decrypt(response.data.alldata);
          self.updateItem = {}
          self.updateValue = ''
          self.getData()
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
      updateCancel() {
        let self = this
        self.updateItem = {}
        self.updateValue = ''
      },
      deleteOk() {
        let self = this
        var uid = cookie.get('uid');
        var token = cookie.get('token');
        var unit_id = localStorage.getItem('middleId')
        if (!unit_id) {
          this.$Message.warning('无参数不能访问');
          return;
          //store.dispatch('setLoginStatus', 0)
          //window.location.reload()
        }
        this.$Loading.start();
        var str = {
          menber_id: self.deleteItem.menber_id,
          unit_id: self.deleteItem.unit_id,
          uid: uid,
          loginType: cookie.get('loginType')
        };
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/info/menberdel', {alldata: strdata.alldata}).then((response) => {
          this.$Loading.finish();
          var res = this.$twjsdes.decrypt(response.data.alldata);
          console.log(res)
          self.deleteModal = false
          self.deleteItem = {}
          self.getData()
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
      deleteCancel() {
        let self = this
        self.deleteModal = false
        self.deleteItem = {}
      },
      addPeo(ind) {
        let self = this
        switch (ind) {
          case 0:
            self.personData = 4
            self.mapShow = true
            break
          case 1:
            self.personData = 3
            self.mapShow = true
            break
          case 2:
            self.personData = 2
            self.mapShow = true
            break
          case 3:
            self.personData = 1
            self.mapShow = true
            break
        }
      },
      addResult() {
        let self = this
        self.mapShow = false
        self.personData = ''
        self.getData()
      }
    },
    computed: {
      menuitemClasses: function () {
        return [
          'menu-item',
          this.isCollapsed ? 'collapsed-menu' : ''
        ]
      }
    },
    created() {
      window.document.title = 'SCS设置';
      this.getData();
    },
    mounted() {
    }
  }
</script>
<style lang="less">
  .pushCard {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    .ivu-card-head {
      border-bottom: none;
    }
    .ivu-card-body {
      display: none;
    }
  }

  .memberContent {
    height: 800px;
    overflow-y: auto;
    border: 1px solid #e1e1e1;
    border-top: none;
    padding: 0 20px;
    box-sizing: border-box;
    background: #f9f9f9;
    .members {
      display: flex;
      flex-direction: column;
      border-bottom: 1px dashed #e5e5e5;
      position: relative;
      .membersTitle{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .memt_title {
          height: 48px;
          line-height: 48px;
          font-size: 14px;
          color: #333333;
        }
        .add{
          position: absolute;
          right: 1%;
          top: 0;
          height: 48px;
          line-height: 48px;
          font-size: 14px;
          color: #3f8fe0;
          cursor: pointer;
        }
      }
      .memberList{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .member {
          width: 49%;
          display: flex;
          flex-direction: column;
          margin-right: 1%;
          position: relative;
          .ivu-icon{
            cursor: pointer;
            position: absolute;
            right: -1.5%;
            top: -8%;
            font-size: 20px;
            color: #f15c60;
            z-index: 9;
          }
          .mem_con {
            width: 100%;
            height: 85px;
            background: #fff;
            border: 1px solid #e5e5e5;
            border-radius: 5px;
            margin-bottom: 25px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            position: relative;
            .ivu-icon {
              position: absolute;
              right: 0;
              top: 0;
              color: #fe3e3e;
              font-size: 30px;
              cursor: pointer;
            }
            .memc_left {
              margin-top: 15px;
              margin-left: 15px;
              display: flex;
              flex-direction: row;
              .photo {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                overflow: hidden;
                margin-right: 10px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .name {
                font-size: 16px;
                color: #222222;
                line-height: 40px;
              }
            }
            .memc_right {
              margin-top: 15px;
              margin-right: 15px;
              display: flex;
              flex-direction: column;
              .tel {
                line-height: 40px;
                font-size: 15px;
                color: #666666;
              }
              .identity {
                font-size: 12px;
                color: #999999;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
    .members:last-child {
      border-bottom: none;
    }
  }
</style>

